<template>
  <div class="page">
    <Navbar title="事项基本信息" />
    <van-tabs v-model="activeTab" color="#4B93FE">
      <van-tab title="基本信息" :name="0" />
      <van-tab title="材料清单" :name="1" />
    </van-tabs>
    <div v-show="activeTab === 0" class="content">
      <div class="header f-c">
        <div class="title">中介机构/业主需做事项<div class="tobtn" style="color: #2F86FD;" @click="medio()">查看中介 ></div></div>
        <div  class="bg">
          {{ detail.interveneName}}
        </div>
      </div>
      <div class="body1">
        <div class="item f-r a-c">
          <div class="icon icon1" />
          <div class="label">受理机构</div>
          <div class="value">{{ detail.mechanism }}</div>
        </div>
        <!-- <div class="item f-r a-c">
          <div class="icon icon2" />
          <div class="label">服务对象</div>
          <div class="value">{{ detail.serviceObject }}</div>
        </div>
        <div class="item f-r a-c">
          <div class="icon icon3" />
          <div class="label">办件类型</div>
          <div class="value">{{ detail.handlingType }}</div>
        </div> -->
        <div class="item f-r a-c">
          <div class="icon icon4" />
          <div class="label">特别程序</div>
          <div class="value">{{ detail.special || '无'}}</div>
        </div>
      </div>
      <div class="body2">
        <div class="title">办事地点/时间</div>
        <div class="item f-r a-c">
          <div class="icon icon1" />
          <div class="label">{{ detail.workLocation }}</div>
        </div>
        <div class="item f-r a-c">
          <div class="icon icon2" />
          <div class="label">{{ detail.term }}</div>
        </div>
        <div class="item f-r a-c">
          <div class="icon icon3" />
          <div class="label">{{ detail.workPhone || '无' }}</div>
        </div>
      </div>
    </div>
    <div v-if="activeTab === 1">
      <van-empty v-if="!detail.materialList " description="暂无数据" />

      <div class="list-item" v-html="detail.materialList" style="font-size: 15px;">
        <!-- {{ detail.materialList }} -->
      </div>
    </div>
  </div>
</template>

<script>
import { http_project_node } from '@/api'

export default {
  name: 'ProjectDetail',
  components: {
  },
  data() {
    return {
      activeTab: 0,
      detail: {}
    }
  },
  created() {
    http_project_node.read(this.$route.query.productCode).then(res => {
      console.log(res)
      this.detail = res.data
      const reg = new RegExp('\r\n', 'g')
      this.detail.materialList = this.detail.materialList.replace(reg, '<br/>')
    })
  },
  methods: {
    medio() {
      this.$router.push({
        path: '/myelder-mediation',
        query: {
          name: this.detail.interveneName
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.page {
  .content {
    padding: 20px;

    .header {
      width: 100%;
      background: #FFFFFF;
      border-radius: 10px;
      padding: 15px;
      .title {
        font-size: 16px;
        color: #333333;
        margin-bottom: 18px;
      }
      .bg {
        display: inline-block;
        border-radius: 13px;
        line-height: 26px;
        color: #666666;
        font-size: 14px;
        line-height: 26px;
      }
    }
    .body1 {
      margin: 20px 0;
      padding: 26px 13px;
      width: 100%;
      background: #FFFFFF;
      border-radius: 10px;
      .item {
        margin-bottom: 20px;
        .icon {
          flex-shrink: 0;
          width: 13px;
          height: 13px;
          margin-right: 12px;
          background-repeat: no-repeat;
          background-size: 100% 100%;
        }
        .label {
          // flex-shrink: 0;
          font-size: 14px;
          color: #999999;
        }
        .value {
          font-size: 14px;
          color: #333333;
          padding-left: 32px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .icon1 {
          background-image: url("~@/assets/my/icon_11.png");
        }
        .icon2 {
          background-image: url("~@/assets/my/icon_12.png");
        }
        .icon3 {
          background-image: url("~@/assets/my/icon_13.png");
        }
        .icon4 {
          background-image: url("~@/assets/my/icon_14.png");
        }
      }
    }
    .body2 {
      padding: 26px 13px;
      width: 100%;
      background: #FFFFFF;
      border-radius: 10px;
      .title {
        font-size: 16px;
        color: #333333;
        margin-bottom: 23px;
      }
      .item {
        margin-bottom: 18px;
      }
      .icon {
        flex-shrink: 0;
        background-repeat: no-repeat;
        background-size: 100% 100%;
      }
      .icon1 {
        width: 17px;
        height: 22px;
        background-image: url("~@/assets/my/icon_15.png");
      }
      .icon2 {
        width: 17px;
        height: 22px;
        background-image: url("~@/assets/my/icon_16.png");
      }
      .icon3{
        width: 17px;
        height: 22px;
        background-image: url("~@/assets/my/icon_17.png");
      }
      .label {
        // flex-shrink: 0;
        font-size: 14px;
        color: #333333;
        padding-left: 12px;
      }
    }
  }
  .list-item {
      width: 100%;
      height: 100%;
      background: #FFFFFF;
      border-radius: 10px;
      padding: 15px 20px;
      line-height: 22px;
      .name {
        color: #333333;
        font-size: 15px;
        margin-bottom: 18px;
      }
      .link {
        font-size: 12px;
        color: #2F86FD;
      }
    }
}
.tobtn {
  font-size: 12px;
  line-height: 12px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #2F86FD;
  float: right;
}
</style>
